<template>
  <div class="container">
    <div class="wrapper search-wrapper">
      <div class="head">
        <span>搜索试题</span>
      </div>
      <div class="from">
        <el-form ref="form" :model="form" label-width="150px" class="demo-dynamic">
          <el-form-item label="课程代码" prop="courseid">
            <el-col :span="16">
              <el-select v-model="form.courseid" placeholder="请选择" filterable>
                <el-option
                  v-for="item in courseCode"
                  :key="item.id"
                  :label="item.code"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <!-- <el-form-item label="客户代码">
                        <el-col :span="16">
                            <el-select v-model="form.customerCode" placeholder="请选择">
                                <el-option v-for="item in customerCode" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="等级代码">
                        <el-col :span="16">
                            <el-select v-model="form.gradeCode" placeholder="请选择">
                                <el-option v-for="item in gradeCode" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="部门代码">
                        <el-col :span="16">
                            <el-select v-model="form.departmentCode" placeholder="请选择">
                                <el-option v-for="item in departmentCode" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="级别代码">
                        <el-col :span="16">
                            <el-select v-model="form.levelCode" placeholder="请选择">
                                <el-option v-for="item in levelCode" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="职能代码">
                        <el-col :span="16">
                            <el-select v-model="form.functionCode" placeholder="请选择">
                                <el-option v-for="item in functionCode" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="科目代码">
                        <el-col :span="16">
                            <el-select v-model="form.accountCode" placeholder="请选择">
                                <el-option v-for="item in accountCode" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
          </el-form-item>-->
          <el-form-item label="语言代码" prop="language">
            <el-col :span="16">
              <el-select v-model="form.language" placeholder="请选择">
                <el-option
                  v-for="item in languageCode"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="形式代码" prop="type">
            <el-col :span="16">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formCode"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="章代码" prop="chapter">
            <el-col :span="16">
              <el-input
                style="max-width:217px"
                v-model="form.chapter"
                auto-complete="off"
                placeholder="请输入00-99"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="节代码" prop="section">
            <el-col :span="16">
              <el-input
                style="max-width:217px"
                v-model="form.section"
                auto-complete="off"
                placeholder="请输入00-99"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="难度代码" prop="difficulty">
            <el-col :span="16">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option
                  v-for="(item,index) in difficultyCode"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="科目代码" prop="subject">
            <el-col :span="16">
              <el-input
                style="max-width:217px"
                v-model="form.subject"
                auto-complete="off"
                placeholder="请输入00-99"
              ></el-input>
              <!-- <el-select v-model="form.sequence" placeholder="请选择">
                                <el-option v-for="(item,index) in orderCode" :key="index" :label="item" :value="item">
                                </el-option>
              </el-select>-->
            </el-col>
          </el-form-item>
          <el-form-item label="关键字代码" prop="keywordCode">
            <el-col :span="16">
              <el-select v-model="form.keywordCode" placeholder="请选择">
                <el-option
                  v-for="(item,index) in keyCode"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="顺序代码" prop="sequence">
            <el-col :span="16">
              <el-input
                style="max-width:217px"
                v-model="form.sequence"
                auto-complete="off"
                placeholder="请输入001-999"
              ></el-input>
              <!-- <el-select v-model="form.sequence" placeholder="请选择">
                                <el-option v-for="(item,index) in orderCode" :key="index" :label="item" :value="item">
                                </el-option>
              </el-select>-->
            </el-col>
          </el-form-item>
          <!-- <el-form-item label="错题率">
                        <el-col :span="16">
                            <el-input v-model="form.errorRate1" style="width:90px" placeholder="请输入"></el-input>
                            <span style="margin:0 8px">至</span>
                            <el-input v-model="form.errorRate2" style="width:90px" placeholder="请输入"></el-input>
                        </el-col>
          </el-form-item>-->
          <div class="button-wrapper">
            <el-button type="primary" @click="onSubmit('form')">提交</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // form: {
      //     courseCode: '',
      //     customerCode: '',
      //     gradeCode: '',
      //     departmentCode: '',
      //     levelCode: '',
      //     functionCode: '',
      //     accountCode: '',
      //     languageCode: '',
      //     formCode: '',
      //     chapterCode: '',
      //     sectionCode: '',
      //     difficultyCode: '',
      //     errorRate1: '',
      //     errorRate2: ''
      // },
      form: {
        courseid: "",
        language: "",
        type: "",
        chapter: "",
        section: "",
        difficulty: "",
        sequence: "",
        subject: "",
        keywordCode: ""
      },
      courseCode: [],
      //   customerCode: [],
      //   gradeCode: [],
      //   departmentCode: [],
      //   levelCode: [],
      //   functionCode: [],
      //   accountCode: [],
      languageCode: [
        {
          label: "English",
          value: 1
        },
        {
          label: "Chinese",
          value: 2
        }
      ],
      formCode: [1, 2, 3],
      keyCode: [
        {
          label: "00",
          value: "00"
        },
        {
          label: "01",
          value: "01"
        }
      ],
      chapterCode: [],
      sectionCode: [],
      difficultyCode: [1, 2, 3]
      //   orderCode: [1, 2, 3]
    };
  },

  created() {
    this.apiPost("System/courseCodeLists").then(res => {
      this.courseCode = res;
    });
    Lockr.rm("questionSearch");
  },

  methods: {
    onSubmit(formName) {
      Lockr.set("questionSearch", this.form);
      router.push("/question/list");
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
}

.wrapper {
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 30px;
  width: 500px;
}

.wrapper .head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  background: rgba(1, 119, 191, 0.6);
}

.wrapper .head span {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(255, 255, 255, 1);
}

.wrapper .from {
  padding: 10px 0;
  border: 1px solid rgba(1, 119, 191, 0.6);
}

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(1, 119, 191, 0.6);
  box-sizing: border-box;
}
</style>
